<template>
  <CommonCard class="todat-users" title="今日交易用户数" :value='orderUser | numberFormat'>
      <template>
        <v-chart :option="getoption()" ></v-chart>
      </template>
      <template #bottom>
          <span>退货率</span>
          <span class="number">{{returnRate|numberFormat}}%</span>
      </template>
  </CommonCard>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TodayUsers',
  computed:{
    ...mapState({
       orderUser: (state) => state.data.reportData.orderUser, // 今日交易用户数
      returnRate: (state) => state.data.reportData.returnRate, // 退货率
      orderUserTrend: (state) => state.data.reportData.orderUserTrend || [], // 实时交易量
      orderUserTrendAxis: (state) =>
        state.data.reportData.orderUserTrendAxis || [] // 时间
    })
  },
  methods:{
    getoption(){
      return{
        xAxis:{
          data:this.orderUserTrendAxis
        },
        yAxis:{
          show:false
        },
        tooltip:{
          formatter(parmas){
            const{name,marker,seriesName,value}=parmas
            return`${name}<br>${marker}${seriesName}${value}`
          }
        },
        series:[
          {
            name:'用户实时交易量',
            type: 'bar',
            data:this.orderUserTrend,
            barWidth:'60%'
          }
        ],
        color:['yellowgreen'],
        grid:{
          left:0,
          top:0,
          right:0,
          bottom:0
        }

      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
